<template>
  <view class="page">
    <view class="row">
      <view class="label">地址</view>
      <view class="content" @click="onChoose">
        <!-- <text class="c-ccc">请选择地址</text> -->
        <input v-model="state.address" readonly placeholder="请选择地址" />
      </view>
    </view>

    <view class="row">
      <view class="label">类型</view>
      <view class="content">
        <radio-group @change="onTypeChange">
          <radio value="buy" :checked="state.type === 'buy'">买</radio>
          <radio value="sell" :checked="state.type === 'sell'">卖</radio>
        </radio-group>
      </view>
    </view>

    <view class="row">
      <view class="label">说明</view>
      <view class="content">
        <input v-model="state.message" placeholder="请输入说明" />
      </view>
    </view>

    <view class="row">
      <view class="label">联系方式</view>
      <view class="content">
        <input
          v-model="state.contact"
          type="number"
          maxlength="11"
          placeholder="请输入联系方式"
        />
      </view>
    </view>

    <button class="btn" :loading="loading" @click="onSubmit">发布</button>
  </view>
</template>

<script setup lang="ts">
// getCurrentInstance 获取当前组件实例的一个方法
import { reactive, ref, getCurrentInstance } from "vue";
import { useUserStore } from "@/stores/user";

const userStore = useUserStore();

// 获取当前组件的实例
const instance: any = getCurrentInstance();

const loading = ref(false);
const state = reactive({
  address: "", // 地址
  lat: 0, // 纬度
  lng: 0, // 经度
  message: "", // 说明
  contact: "", // 联系方式
  type: "buy", // 类型 buy-买 sell-卖
});

// 勾选框change事件
const onTypeChange = (event: any) => {
  state.type = event.detail.value;
};

// 选择地址
const onChoose = () => {
  uni.chooseLocation({
    // 问题： 不能写死经纬度。
    //      1. 从首页进入到这个页面时，将首页获取到的经纬度作为传递传递过来
    //      2. 使用状态管理器
    latitude: userStore.latitude,
    longitude: userStore.longitude,
    success: (res) => {
      console.log(res, "res");
      state.address = res.address;
      state.lat = res.latitude;
      state.lng = res.longitude;
    },
  });
};

// 发布
const onSubmit = () => {
  // 表单校验
  if (!state.address) {
    return uni.showToast({ icon: "none", title: "请选择地址" });
  }

  if (!state.message || !state.contact) {
    return uni.showToast({ icon: "none", title: "请完善数据" });
  }

  // 手机号校验
  if (!/^1\d{10}$/.test(state.contact)) {
    return uni.showToast({ icon: "none", title: "请输入正确的手机号" });
  }

  loading.value = true;
  // 调用接口
  uni.request({
    url: "http://localhost:3000/trades",
    method: "POST",
    data: state,
    success: (res) => {
      uni.showToast({ icon: "none", title: "发布成功" });

      // 使用通道对象触发一个 refresh 事件
      const eventChannel = instance.ctx.getOpenerEventChannel();
      eventChannel.emit("refresh");

      // 回退到上一页
      uni.navigateBack();
    },
    complete: () => {
      loading.value = false;
    },
  });
};
</script>
